<template>
	<!-- 聊天区域 -->
	<view class="chat-container">
		<scroll-view class="chat-messages" scroll-y :scroll-top="scrolltop" scroll-with-animation>
			<view v-for="(item,index) in date" :key="item.id" class="chat-message">
				<view class="user-info">
					<image :src="item.avatar" mode="aspectfit" class="user-avatar"></image>
					<text class="user-name">{{item.nickname}}</text>
				</view>
				<text v-if="item.code == 0" class="message-content">{{item.content}}</text>
				<view v-show="item.code == 1">
					<Gift :imageUrl="item.imgRun" :frameCount="10" :duration="1.5" :width="60" :height="60"></Gift>
				</view>
			</view>
		</scroll-view>
	</view>

	<!-- 底部输入区域 -->
	<view class="input-area">
		<view class="input-wrapper">
			<input type="text" v-model="messageText" placeholder="说点什么..." @confirm="sendmessage" class="chat-input"
				ref="msgs" />
		</view>
		<view class="send-btn" @click="sendmessage">
			<text>发送</text>
		</view>
	</view>
</template>

<script>
	import {
		giveGift,
		getGiftInfoById
	} from "@/api/live"
	import Gift from "@/component/gift/Gift.vue";
	export default {
		props: {
			date: Array
		},
		data() {
			return {
				messageText: '',
				scrollthreshold: 150,
				clientobj: client,
				scrolltop: 0,
				giftShow: [{}, {}, {}, {}, {}, {}]
			}
		},
		mounted() {
			// 监听消息变化，自动滚动到底部
			this.$watch('date', () => {
				this.roll()
			}, {
				deep: true
			})
		},
		components:{
			Gift
		},
		methods: {
			getScoll() {
				// 新增滚动控制逻辑
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.chat-messages').boundingClientRect()
					query.select('.chat-messages').scrollOffset()
					query.exec(res => {
						if (res && res[1]) {
							this.scrollTop = res[1].scrollHeight
						}
					})
				})
			},
			roll() {
				console.log("调用滚动逻辑")
				const query = uni.createSelectorQuery().in(this)
				query.select('.chat-messages').boundingClientRect()
				query.select('.chat-messages').scrollOffset()
				query.exec(res => {
					if (res && res[1]) {
						// 修正变量名一致
						this.scrolltop = res[1].scrollHeight
					}
				})
			},
			sendmessage() {
				if (!this.messageText.trim()) {
					uni.showToast({
						title: '消息不能为空',
						icon: 'none'
					});
					return;
				}

				//获取个人信息
				let info = uni.getStorageSync("userInfo");;
				console.log("666", this.messageText);
				// 构建消息对象
				const json = {
					code: 0, //弹幕信息
					nickname: info.nickname,
					level: info.level,
					avatar: info.avatar,
					content: this.messageText
				};

				client.send("/app/live", {}, JSON.stringify(json));

				this.messageText = '';

				// 滚动到底部
				this.$nextTick(() => {
					this.roll()
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.chat-messages {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		scroll-behavior: smooth;
		/* 隐藏滚动条的完整解决方案 */
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		padding-right: 20px;
		/* 补偿增加的宽度，避免内容被挤 */

		/* WebKit 内核浏览器 */
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
		}

		/* 微信小程序特殊处理 */
		&::scrollbar {
			width: 0;
			height: 0;
		}
	}

	.chat-message {
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.user-avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		margin-right: 8px;
	}

	.user-name {
		color: #ff9900;
		font-size: 14px;
		font-weight: bold;
	}

	.message-content {
		color: #ffffff;
		font-size: 14px;
		line-height: 1.5;
	}

	.input-area {
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background-color: #222222;
		border-top: 1px solid #333333;
	}

	.input-wrapper {
		flex: 1;
		height: 30px;
		margin-right: 10px;
		background-color: #333333;
		border-radius: 15px;
		padding: 0 10px;
		display: flex;
		align-items: center;
	}

	.chat-input {
		flex: 1;
		height: 100%;
		color: #ffffff;
		font-size: 14px;
	}

	.send-btn {
		width: 60px;
		height: 30px;
		background-color: #ff9900;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 14px;
	}
</style>